<template>
	<view class="report">
		<view class="report-content" v-if="reportList">
			<view v-if="reportList.length > 0">
				<view v-for="(item, index) of reportList" :key="index"
					class="report-content-box ff-relative ff-margin-12 ff-bg-fff ff-border-radius-10">
					<view class="ff-padding-12">
						<view class="ff-flex">
							<image class="pdfImg"
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/pdf.png"
								alt="">
							</image>
							<view class="ff-font-16 ff-font-weight-600 ff-margin-bottom-12">
								{{item.projectName}}<text v-if="item.rank">第{{item.rank}}次维保</text>
							</view>
						</view>
						<view class="ff-flex ff-align-items-1 ff-padding-left-10 ff-font-12">
							<view class="report-content-box-tips">
								<view class="tips tips1" v-if="item.maintenanceType == 1">月检</view>
								<view class="tips tips1" v-if="item.maintenanceType == 2">季检</view>
								<view class="tips tips1" v-if="item.maintenanceType == 3">半年检</view>
								<view class="tips tips1" v-if="item.maintenanceType == 4">年检</view>
								<view class="tips tips1" v-if="item.maintenanceType == 5">特殊检</view>
							</view>
							<view class="report-content-box-tips">
								<view class="tips tips2" v-if="item.signStatus == 1">签章中</view>
								<view class="tips tips3" v-if="item.signStatus == 2">签章完成</view>
								<view class="tips tips4" v-if="item.signStatus == 3">未签章</view>
							</view>
						</view>
						<view class="ff-color-5C5F65">
							<view class="ff-margin-bottom-8">技术服务机构：{{item.orgName||'--'}}</view>
							<view class="ff-margin-bottom-8">
								报告签发时间：{{item.maintenanceTime == null ? '--' : item.maintenanceTime}}
							</view>
							<view>签章完成时间：{{item.signTime || '--'}}</view>
						</view>
					</view>
					<view class="ff-flex report-content-butList">
						<view @click="signatureClick(item)" class="ff-flex ff-align-items-1">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/signatureIcon.png"
								mode=""></image>
							<view>签章情况</view>
						</view>
						<view @click="maintenanceReportClick(item)" class="ff-flex ff-align-items-1">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/reportIcon.png"
								mode=""></image>
							<view>维保报告书</view>
						</view>
					</view>
				</view>
				<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
					bg-color="#f5f5f5">没有更多了</u-divider>
			</view>
			<f-noData v-else></f-noData>
		</view>
		<!-- 签章情况弹窗 -->
		<u-popup v-model="signatureState" mode="bottom" closeable height="85%" safe-area-inset-bottom="true"
			border-radius="40" close-icon-color="#fff" @close="signatureState = false">
			<view class="signatureBox ff-bg-f5">
				<view class="signatureBox-title ff-padding-15 ff-font-15 ff-bg-blue ff-color-fff ff-text-center">签章情况
				</view>
				<view class="signatureBox-content">
					<view v-for="(item, index) of signatureList" :key="index"
						class="ff-margin-12 ff-padding-12 ff-bg-fff ff-border-radius-10 ff-flex ff-align-items-1 ff-flex-between">
						<view class="ff-flex ff-align-items-1">
							<image
								src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/peopleIcon.png"
								mode=""></image>
							<view class="ff-margin-left-12">
								<view class="ff-margin-bottom-8 ff-font-15">
									{{item.username}}
									<text class="ff-color-999 ff-font-13 ff-margin-left-5">{{item.userTypeName}}</text>
								</view>
								<view class="ff-font-13 ff-color-555 ff-line-height-1-3" style="width: 300rpx;">
									{{item.sealTypeName}}
								</view>
							</view>
						</view>
						<view class="report-content-box-tips ff-font-12">
							<view class="tips tips4" v-if="item.signStatus == 0">未签章</view>
							<view class="tips tips2" v-if="item.signStatus == 1">签章中</view>
							<view class="tips tips3" v-if="item.signStatus == 2">签章完成</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
		<u-toast ref="uToast" />
		<f-loading ref="loading" />
	</view>
</template>

<script>
	import config from "@/tools/config.js";
	export default {
		data() {
			return {
				// 返回顶部icon
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				reportList: [], // 报告书数据列表
				params: {
					projectId: '',
					current: 1,
					size: 10,
					keyword: "", // 项目名字
				},
				noData: false, // 没有更多了
				signatureList: [], // 签章状态列表数据
				signatureState: false, // 签章情况弹窗显/隐
			}
		},
		// 页面滚动距离顶部的数据
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
		},
		onLoad(e) {
			// console.log('前边传过来的参数：', e)
			this.params.projectId = e.id
			this.getReportList(e.id) // 获取单位详情页头部的数据
		},
		// 上拉加载
		onReachBottom() {
			if (!this.noData) {
				this.params.current++;
				this.getReportList() // 获取报告书列表的数据
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			let that = this;
			that.params.current = 1;
			this.getReportList() // 获取报告书列表的数据
			setTimeout(() => {
				that.$refs.uToast.show({
					title: '刷新成功',
					type: 'success'
				});
				uni.stopPullDownRefresh(); // 停止刷新
			}, 100);
		},
		methods: {
			// 获取报告书列表的数据
			async getReportList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/supervise/superviseCompanyProjectMaintenancePage',
					data: this.params
				});
				// console.log('获取报告书列表的数据------', data);
				this.$refs.loading.closeLoading(); // 关闭loading动画
				if (data.code == 200) {
					this.totalProject = data.data.total
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.reportList = [];
					} else if (infoList.length < 5 && this.params.current == 1) {
						this.noData = true;
						this.reportList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.reportList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.reportList = this.reportList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
			},
			// 查询签章状态
			async signatureClick(item) {
				this.$refs.loading.openLoading('获取中···'); // 打开loading动画
				const data = await this.$http.get({
					url: `/supervise/signList/${item.maintenanceId}`
				})
				// console.log('获取当前点击的签章状态', data)
				this.$refs.loading.closeLoading(); // 关闭loading动画
				if (data.code == 200) {
					this.signatureState = true
					this.signatureList = data.data
				} else {
					this.signatureState = false
					uni.showModal({
						title: '温馨提示',
						content: data.msg,
						confirmColor: '#3178FF',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						},
					})
				}
			},
			// 查看维保报告书
			maintenanceReportClick(item) {
				// console.log('查看维保报告书', item)
				let that = this
				if (item.signStatus == 1) {
					that.$refs.loading.openLoading('报告书加载中···');
					uni.request({
						url: `${config.baseUrl}/supervise/previewSignFile/${item.ydtFileId}`,
						method: 'get',
						responseType: 'arraybuffer', //  小程序不支持bolb
						success: res => {
							that.$refs.loading.closeLoading();
							const fs = uni.getFileSystemManager()
							const filePath = wx.env.USER_DATA_PATH + '/' + Date.now() +
								'.pdf' // wx.env.USER_DATA_PATH 为微信提供的保存文件路径
							fs.writeFile({
								filePath,
								data: res
									.data, // 如果是字符串 uni.base64ToArrayBuffer(data.data.replace(/[\r\n]/g, ''))  // 将 base64 转为 arrayuffer
								success() {
									uni.openDocument({
										showMenu: true,
										fileType: 'pdf',
										filePath,
										success: function() {
											// console.log('打开文档成功')
										}
									})
								},
								fail(err) {
									// console.log('错误', err)
								}
							})
						},
						fail() {
							that.$refs.loading.closeLoading();
							that.$refs.uToast.show({
								title: '报告书发生错误，请重新打开',
								type: 'error'
							});
						}
					})
				} else if (item.signStatus == 2 && item.reportSignUrl) {
					that.$refs.loading.openLoading('报告书加载中···');
					uni.downloadFile({
						url: item.reportSignUrl,
						success(res) {
							// console.log(res)
							let filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success() {
									// console.log('打开文档成功', res);
									that.$refs.loading.closeLoading();
								},
								fail() {
									that.$refs.loading.closeLoading();
									that.$refs.uToast.show({
										title: '报告书发生错误，请重新打开',
										type: 'error'
									});
								}
							});
						},
						fail() {
							that.$refs.uToast.show({
								title: '报告书发生错误，请重新打开',
								type: 'error'
							});
							that.$refs.loading.closeLoading();
						}
					});
				} else if (item.signStatus == 3 && item.reportUrl) {
					that.$refs.loading.openLoading('报告书加载中···');
					uni.downloadFile({
						url: item.reportUrl,
						success(res) {
							// console.log(res)
							let filePath = res.tempFilePath;
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success() {
									// console.log('打开文档成功', res);
									that.$refs.loading.closeLoading();
								},
								fail() {
									that.$refs.loading.closeLoading();
									that.$refs.uToast.show({
										title: '报告书发生错误，请重新打开',
										type: 'error'
									});
								}
							});
						},
						fail() {
							that.$refs.uToast.show({
								title: '报告书发生错误，请重新打开',
								type: 'error'
							});
							that.$refs.loading.closeLoading();
						}
					});
				} else {
					uni.showModal({
						title: '温馨提示',
						content: '暂无已签章的报告书',
						confirmColor: '#3178FF',
						showCancel: false,
						success: function(res) {
							if (res.confirm) {}
						},
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.report {
		&-content {

			&-box {
				&-tips {

					.tips {
						border-radius: 11rpx;
						display: inline-block;
						padding: 13rpx 30rpx;
						margin: 0 0rpx 25rpx 15rpx;
					}

					.tips1 {
						background-color: #ecf5ff;
						color: #2979ff;
					}

					.tips2 {
						background-color: #FFF1DF;
						color: #FE9229;
					}

					.tips3 {
						background-color: #E6FFE5;
						color: #08C800;
					}

					.tips4 {
						background-color: #FFEFEF;
						color: #EF312E;
					}
				}
			}

			&-butList {
				border-top: 2rpx solid #E2E2E2;
				justify-content: space-around;

				.ff-align-items-1 {
					justify-content: center;
					padding: 30rpx;
					width: 50%;
					color: #3178FF;

					image {
						width: 28rpx;
						height: 30rpx;
						margin-right: 8rpx;
					}
				}

				.ff-align-items-1:nth-child(1) {
					border-right: 2rpx solid #E2E2E2;
				}
			}
		}
	}

	.pdfImg {
		width: 35rpx;
		height: 35rpx;
		margin-right: 10rpx;
	}

	.signatureBox {
		width: 100%;
		height: 100%;

		&-title {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}

		&-content {
			padding: 95rpx 0 50rpx;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}

	/deep/ .u-drawer-bottom {
		background-color: #f5f5f5 !important;
	}
</style>